<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title th:text="${title}">🍽️ 点餐系统</title>
    <link rel="stylesheet" th:href="@{/css/element-ui.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <style>
        /* Loading样式 */
        #global-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-in-out;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #409EFF;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        .loading-text {
            font-size: 16px;
            color: #606266;
            margin-bottom: 10px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .loading-hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 应用内容初始隐藏 */
        #app {
            display: none;
        }
    </style>
</head>
<body>

<!-- 全局Loading -->
<div id="global-loading">
    <div class="loading-spinner"></div>
    <div class="loading-text">🍽️ 点餐系统加载中...</div>
    <div style="margin-top: 10px; font-size: 12px; color: #909399;" id="loading-status">
        初始化应用...
    </div>
</div>
<div id="app">
    <!-- 顶部导航 -->
    <div class="header">
        <div class="header-title" th:text="${title}">🍽️ 点餐系统</div>
        <div class="header-subtitle" th:text="${subtitle}">亲爱的，你想吃什么？</div>
    </div>

    <!-- 主内容区 -->
    <div class="main-container">
        <!-- 分类侧边栏 -->
        <div class="category-sidebar" :class="{ 'hidden': !showCategories }">
            <div class="category-list">
                <div v-for="category in categories" :key="category.id" class="category-item"
                     :class="{ 'active': selectedCategory === category.id }" @click="selectCategory(category)">
                    {{ category.name }}
                </div>
            </div>
        </div>

        <!-- 餐品展示区 -->
        <div class="product-area">
            <!-- 分类切换按钮 -->
            <div class="category-toggle" @click="toggleCategories">
                <i class="el-icon-menu"></i>
                {{ currentCategoryName || '选择分类' }}
            </div>

            <div class="product-grid">
                <div v-for="product in filteredProducts" :key="product.id" class="product-card"
                     @click="addToCart(product)">
                    <div class="product-image">
                        <img :src="getImageUrl(product.imageUrl)" :alt="product.name" @error="handleImageError"
                             @load="handleImageLoad">
                        <div class="product-image-placeholder" style="display: none;">🍽️</div>
                    </div>
                    <div class="product-info">
                        <div class="product-name">{{ product.name }}</div>
                        <div class="product-description">{{ product.description || '美味餐品' }}</div>
                    </div>
                    <div class="product-action">
                        <i class="el-icon-plus"></i>
                    </div>
                </div>
            </div>

            <div v-if="filteredProducts.length === 0" class="empty-state">
                <div class="empty-icon">🍽️</div>
                <div class="empty-text">该分类下暂无餐品</div>
            </div>
        </div>
    </div>

    <!-- 购物车底部栏 -->
    <div class="cart-footer" v-if="cartItems.length > 0">
        <div class="cart-info">
            <div class="cart-count">已选 {{ totalQuantity }} 件</div>
            <div class="cart-items">{{ cartItemNames }}</div>
        </div>
        <button class="checkout-btn" @click="goToCheckout">
            去下单
            <span class="cart-badge">{{ totalQuantity }}</span>
        </button>
    </div>

    <div class="floating-cart" v-else @click="showCart = true">
        <i class="el-icon-shopping-cart-2"></i>
    </div>
</div>

<script th:src="@{/lib/vue.js}"></script>
<script th:src="@{/lib/element-ui.js}"></script>
<script th:src="@{/lib/axios.js}"></script>
<script th:src="@{/lib/api.js}"></script>
<script th:src="@{/js/front/app.js}"></script>
<script>
    // 简单可靠的Loading控制
    let resourcesLoaded = 0;
    const totalResources = 5; // 总共5个JS文件

    // 资源加载完成计数器
    function onResourceLoad() {
        resourcesLoaded++;
        console.log(`资源加载进度: ${resourcesLoaded}/${totalResources}`);

        if (resourcesLoaded >= totalResources) {
            // 所有资源加载完成，但Vue应用可能还在初始化
            console.log('所有JS资源加载完成，等待Vue应用初始化');
            document.getElementById('loading-status').textContent = '应用初始化中...';
        }
    }

    // 监听所有script标签的加载
    document.addEventListener('DOMContentLoaded', function () {
        const scripts = document.querySelectorAll('script[src]');
        scripts.forEach(script => {
            const originalOnLoad = script.onload;
            const originalOnError = script.onerror;

            script.onload = function () {
                if (originalOnLoad) originalOnLoad();
                onResourceLoad();
            };

            script.onerror = function () {
                if (originalOnError) originalOnError();
                onResourceLoad(); // 即使出错也计数
            };
        });

        // 8秒超时保护
        setTimeout(() => {
            console.warn('加载超时，强制显示页面');
            hideLoading();
        }, 8000);
    });

    // 全局函数：隐藏Loading（供app.js调用）
    window.hideAppLoading = function () {
        console.log('Vue应用就绪，隐藏Loading');
        hideLoading();
    };

    function hideLoading() {
        const loading = document.getElementById('global-loading');
        const app = document.getElementById('app');

        if (app) {
            app.style.display = 'block';
        }

        if (loading) {
            loading.classList.add('loading-hidden');
            setTimeout(() => {
                loading.style.display = 'none';
                console.log('Loading隐藏完成');
            }, 500);
        }
    }
</script>
</body>
</html>